<template>
  <div class="Personal">
    <el-dialog
      title="设置新密码"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="input1" placeholder='请输入密码' show-password></el-input>
      <br>
      <br>
      <br>
      <el-input v-model="input2" placeholder="再次确认密码" @blur="inputpassword" show-password></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitpassword">确 定</el-button>
  </span>
    </el-dialog>


    <div class="page">
      <el-row>
        <el-col :span="20" :offset="2">
          <div class="grid-content bg-purple">
            <div class="page1">
              <el-row>
                <el-col :span="2">
                  <div>
                    <el-avatar :size="90"> 头像</el-avatar>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div>
                    <h4>{{username}}</h4>
                    <span class="zh">中国</span>
                    <p class="signature">这个人很懒，什么也没有留下</p>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <h5>基本信息</h5>
              </el-row>
              <el-row>
                <ul>
                  <li>
                    <label class="label">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
                    <span class="label-point">{{username}}</span>
                  </li>
                  <li>
                    <label class="label">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信</label>
                    <span class="label-point">未填写</span>
                  </li>
                  <li>
                    <label class="label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历</label>
                    <span class="label-point">
                学历
              </span>
                  </li>
                  <li>
                    <label class="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                    <span class="label-point">女</span>
                  </li>
                  <li>
                    <label class="label">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</label>
                    <span class="label-point">未填写</span>
                  </li>

                  <li>
                    <label class="label">QQ&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <span class="label-point">未填写</span>
                  </li>
                  <li>
                    <label class="label">收件地址</label>
                    <span class="label-point">未填写</span>
                  </li>
                  <li>
                    <label class="label">签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                    <span class="label-point">这个人很懒，什么也没有留下</span>
                  </li>
                </ul>
              </el-row>
              <el-row>
                <h5>认证信息</h5>
              </el-row>
              <el-row>
                <ul>
                  <li>
                    <label class="label">实名认证</label>
                    <span class="label-point certification">未认证</span>
                  </li>
                </ul>
              </el-row>
              <el-row>
                <h5>账户安全</h5>
              </el-row>
              <el-row>
                <div class="security">
                  <el-col :span="8">
                    <div>
                      <label class="label">手&nbsp;&nbsp;&nbsp;&nbsp;机</label>
                      <span class="spli">15098567469</span>
                      <span class="modify-text">
                        <span>更换手机</span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="">
                      <label class="label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                      <span class="spli">未绑定邮箱</span>
                      <span class="modify-text">
                        <span>绑定邮箱</span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="">
                      <label class="label">登录密码</label>
                      <span class="spli">未设置密码</span>
                      <span class="modify-text" @click="dialogVisible=true">
                        <span>设置密码</span>
                      </span>
                    </div>
                  </el-col>
                </div>
              </el-row>
              <el-row>
                <h5>职业信息</h5>
              </el-row>
              <el-row>
                <div class="professional">
                  <div class="professional-module">
                    <label class="label">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</label>
                    <span class="spli">未设置</span>
                    <span class="modify-text">修改</span>
                  </div>
                  <div class="professional-module">
                    <label class="label">感&nbsp;&nbsp;兴&nbsp;&nbsp;趣</label>
                    <span class="spli">未设置</span>
                    <span class="modify-text">添加感兴趣的职业方向</span>
                  </div>
                </div>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>


    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from "./common/Footer";

  export default {
    name: "Personal",
    data() {
      return {
        dialogVisible: false,
        username: "请先登录",
        input1: "",
        input2: "",
        passwordin: false,

      }
    },
    components: {
      Footer
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {

          });
      },
      inputpassword() {
        if (this.input1 === this.input2) {
          this.passwordin = true
        } else {
          this.$message.error('两次密码不同，请再次确认密码');
        }
      },
      submitpassword() {
        if (this.input1 === "") {
          this.$message.error('请输入密码');
        } else {
          if (this.passwordin === false) {
            this.$message.error('两次密码不同，请再次确认密码');
          } else {
            this.$axios.post(`${this.$settings.Host}/users/id/`, {
              "id": sessionStorage.id || localStorage.id,
              "password": this.input1
            }).then(res => {
              this.$message('成功');
              this.dialogVisible = false
            }).catch(error => {
              this.$message.error('添加失败');
            })
          }
        }
      }

    },
    created() {
      this.username = sessionStorage.username || localStorage.username || "请先登录"
    }
  }
</script>

<style scoped>
  .el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 2px;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 10%;
  }

  .professional {
    width: 100%;
    margin-left: 14px;
  }

  .spli {
    margin-right: 0 !important;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    font-weight: 400;
    font-family: PingFangSC-Regular;
    color: #5e5e5e;
  }

  .professional-module {
    margin-right: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .modify-text {
    font-size: 14px;
    color: #4a90e2;
    display: inline-block;
    margin-left: 17px;
    cursor: pointer;
    font-family: PingFangSC-Regular;
  }

  .security {
    display: flex;
    align-items: center;
    margin-left: 14px;
    margin-bottom: 15px;
  }

  .label-point {
    flex: 1;
    color: #5e5e5e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  label {
    font-size: 15px;
    padding: 0;
    color: #9b9b9b;
    margin-bottom: 0;
    line-height: 20px;
    margin-right: 20px;
    text-align: left;
  }

  li {
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-right: 56px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: 14px;
  }

  h5 {
    font-size: 18px;

    margin: 0;
  }

  .signature {
    width: 100%;
    font-size: 14px;
    color: #5e5e5e;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .zh {
    display: block;
    font-size: 12px;
    color: #9b9b9b;
  }

  .page1 {
    margin-bottom: 20px;
    padding: 30px;
  }

  .page {
    padding: 20px;
    background: #f1f1f1;
    width: 100vw;
    height: 100%;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    /*margin-bottom: 0;*/
  }


  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #ffffff;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  h4 {
    color: #000;
    font-size: 18px;
    margin: 0 0 8px;
  }


</style>
